<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item v-if="isAuth('hotel:hotelseller:list')">
        <el-select
          multiple
          collapse-tags
          clearable
          style="width:180px;"
          v-model="sellerIds"
          filterable
          remote
          reserve-keyword
          @change="selectSeller"
          placeholder="商家名称"
          :remote-method="remoteMethod"
          :loading="loading"
        >
          <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="dataForm.key" placeholder="收货人/手机号/订单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="下单时间：">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          :clearable="true"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">{{ $t('Common.Query') }}</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="dataForm.orderStatus" @tab-click="handleClick">
      <el-tab-pane v-for="item in statusOptions" :key="item.label" :name="item.value">
            <span slot="label">
                {{item.label}}（{{item.count}}）
              </span>
      </el-tab-pane>
    </el-tabs>
    <el-table
      :data="dataList"
      border=""
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="sellerName" header-align="center" align="center" label="商家"></el-table-column>
      <el-table-column prop="orderSn" header-align="center" align="center" label="订单号"></el-table-column>
      <el-table-column prop="orderStatus" header-align="center" align="center" label="订单状态">
        <template slot-scope="scope">
          <el-tag size="small">{{orderStatus[scope.row.orderStatus]}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="payMethod" header-align="center" align="center" label="支付方式">
        <template slot-scope="scope">
          <el-tag size="small">{{payMethods[scope.row.payMethod]?payMethods[scope.row.payMethod]:"未支付"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="expressnum" header-align="center" align="center" label="物流单号"></el-table-column>
      <el-table-column prop="consignee" header-align="center" align="center" label="收货人"></el-table-column>
      <el-table-column prop="address" header-align="center" align="center" label="地址"></el-table-column>
      <el-table-column prop="mobile" header-align="center" align="center" label="手机"></el-table-column>
      <el-table-column prop="amount" header-align="center" align="center" label="订单总价"></el-table-column>
      <el-table-column prop="submitTime" header-align="center" align="center" label="下单时间"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" v-if="scope.row.orderStatus === 2" @click="shipped(scope.row.id)">发货</el-button>
          <el-button type="text" size="small" v-if="scope.row.orderStatus === 13" @click="refunded(scope.row.id,scope.row.reason)">退款</el-button>
          <el-button type="text" size="small" v-if="scope.row.orderStatus === 13" @click="refuse(scope.row.id,scope.row.reason)">拒绝退款</el-button>
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <OrderShipped v-if="orderShippedVisible" ref="orderShipped" @refreshDataList="getDataList"></OrderShipped>
  </div>
</template>

<script>
import AddOrUpdate from "./order-add-or-update";
import OrderShipped from "./order-shipped";
export default {
  data() {
    return {
      orderStatus: {
        "0": "待付款",
        "12": "待付款",
        "1": "已支付",
        "2": "待发货",
        "3": "待收货",
        "4": "待评价",
        "5": "已完成",
        "13": "退款中",
        "14": "已退款",
        "15": "已取消",
        "16": "拒绝退款"
      },
      dateRange:[],
      payMethods:{
        1: '微信支付',
        2: '余额支付',
        3: '积分支付'
      },
      sellerIds:[],
      platformSeller:[],
      dataForm: {
        key: undefined
      },
      statusOptions:[
        {
          label: "全部",
          value: 0
        },
        {
          label:"待付款",
          value: 12
        },{
          label:"待发货",
          value: 2
        },{
          label:"待收货",
          value: 3
        },{
          label:"待评价",
          value: 4
        },{
          label:"已完成",
          value: 5
        },{
          label:"退款中",
          value: 13
        },{
          label:"已退款",
          value: 14
        },{
          label:"已取消",
          value: 15
        },
      ],
      loading:false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      orderShippedVisible: false
    };
  },
  components: {
    AddOrUpdate,
    OrderShipped
  },
  activated() {
    this.remoteMethod();
    this.getDataList();
  },
  methods: {
    handleClick(val) {
      this.pageIndex = 1;
      this.getDataList();
    },
    selectSeller(id,value) {
      this.getDataList();
      //this.getExecuteUserId();
    },
    remoteMethod(query){
      if(this.isAuth('hotel:hotelseller:list')){
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
          method: "get",
          params: this.$http.adornParams({
            sellerName: query
          })
        }).then(({ data }) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.platformSeller = data.page.list;
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      if (this.dataForm.orderStatus * 1 == 0) {
        this.dataForm.orderStatus = undefined;
      }
      let startTime = undefined;
      let endTime = undefined;
      if (this.dateRange && this.dateRange.length > 0) {
        startTime = this.dateRange[0];
      }
      if (this.dateRange && this.dateRange.length > 1) {
        endTime = this.dateRange[1];
      }

      var ids = '';
      if (this.sellerIds) {
        ids = this.sellerIds.join(",");
      }
      this.$http({
        url: this.$http.adornUrl("/admin/order/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm,
          startTime,
          endTime,
          sellerIds: ids,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.records;
          this.statusOptions = data.data;
          this.totalPage = data.page.total;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    shipped (id) {
      this.orderShippedVisible = true;
      this.$nextTick(() => {
        this.$refs.orderShipped.init(id);
      });
    },
    refuse () {

    },
    refunded(id,reason) {
      this.$confirm(
        `原因：${reason}`,
        "提示",
        {
          confirmButtonText: "退款",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/admin/order/${id}/refunded`),
          method: "post",
          data: this.$http.adornData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    refuse(id,reason) {
      this.$confirm(
        `原因：${reason}`,
        "提示",
        {
          confirmButtonText: "拒绝退款",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/admin/order/${id}/refuse`),
          method: "post",
          data: this.$http.adornData()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).then(() => {
        this.$http({
          url: this.$http.adornUrl("/admin/order/delete"),
          method: "post",
          data: this.$http.adornData(ids, false)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>
